<template>
<div class="person-root">
  <router-link tag="div" to="/person"
    class="cont" :style="{backgroundImage: `url(/static/avs/${data.img}.jpg)`}">
    <div class="name">{{data.name}}</div>
    <div class="desc">{{data.desc}}</div>
  </router-link>
</div>
</template>

<script>
export default {
  name: 'person',
  props: ['data']
}
</script>

<style scoped lang="stylus">
.person-root
  box-sizing border-box
  height 178px
  width 136px
  border 3px solid
  border-image url(./img/avatar-border.png) 3
  padding 2px
  text-align center
  >.cont
    cursor pointer
    border 1px solid #59b3ff
    border-radius 5px
    height 100%
    width 100%
    box-sizing border-box
    padding 110px 14% 0 14%
    background-size cover
    background-position center
    >.name
      font-size 14px
      border-bottom 1px solid white
    >.desc
      font-size 12px

</style>